<!DOCTYPE HTML>
<head>
    <link rel="shortcut icon" href="{{ url_for('static', filename='logo.png') }}">
    <meta charset="utf-8">
    <title>AMR参数表</title>
    <meta name="code-stutio" content="code-123"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

    <style type="text/css">
        .title_a {
            background-color: #8F1930;
            color: white;
            text-align: center;
            padding: 5px;
        }

        .b {
            overflow: hidden;
            color: #f2f2f2;
            background-color: rgb(72, 72, 72);
        }


        .b title_a {
            float: left;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }


        .b title_a:hover {
            background-color: #ddd;
            color: black;
        }


        .f {
            overflow: hidden;
            color: #f2f2f2;
            background-color: gray;
            height: 740px;
            text-align: center;
            width: 188px;
            float: right;
        }


        .f title_a {
            float: left;
            color: #f2f2f2;
            text-align: center;
            padding: 10px 70px;
            text-decoration: none;
        }


        .f title_a:hover {
            background-color: #ddd;
            color: black;
        }

        .c {
            line-height: 30px;
            background-color: gray;
            color: white;
            height: 700px;
            width: 104px;
            float: left;
            padding: 20px;
        }

        .d {
            float: left;
            padding: 50px;
            position: relative;
        }

        .robot_config {
            float: left;
            padding: 100px;
            position: relative;
        }

        .e {
            background-color: rgb(40, 40, 40);
            color: rgb(200, 200, 200);
            clear: both;
            text-align: center;
            padding: 1px;
        }

        .e title_a {
            color: rgb(200, 200, 200);
            padding: 0px 0px;
            text-decoration: none;
        }

        .e title_a:hover {
            color: rgb(250, 250, 250);
        }


        .sub a {
            color: white;
            background: #8f1930;
            text-decoration: none;
            padding: 7px 120px;
            font-size: 13px;
            font-family: arial, serif;
            font-weight: bold;
            -webkit-border-radius: 3em;
            -moz-border-radius: .1em;
            -border-radius: .1em;
        }

        table {
            margin: auto;
            width: 70%;
            line-height: 30px;
        }

        .view {
            width: 99%;
            margin: 0 auto;
            padding: 0px;
            height: auto;
            border: none;
            resize: none;
            color: #8f1930;
        }

        .view:focus {
            border: none;
            outline: none;
        }
    </style>

</head>
<body>
<div id='editor'></div>
<div class="title_a">
    <div id="box" style="opacity: 1;">
        <h1>AMR参数表</h1>
    </div>
</div>
<p></p>
<table width="100%" border="1" bgcolor="#fffff0" style="color:#8f1930;">
    <tr style="text-align: center">
        <td>
            <b>模块</b>
        </td>
        <td>
            <b>参数</b>
        </td>
    </tr>
    {% for item in params %}
    <tr>
        <td style="text-align: center">
            <b contenteditable="true" class="module" data="{{item[0]}}">{{item[0]}}</b>
        </td>
        <td contenteditable="true" class="params" data="{{item[1]}}"><textarea class='view'>{{item[1]}}</textarea></td>

    </tr>
    {% endfor %}
</table>
<p></p>
<div class="sub" style="text-align: center">
    <button id="save">保存</button>
    <p>
        <a href="/">Back-返回首页</a>
    </p>

</div>
</body>

<script type="text/javascript">
    var save_path = '{{ url_for("admin.save_configure") }}'
    var reload_path = '{{ url_for("admin.admin_index") }}'
    $(function () {
        //json显示
        $('.params').each(function (i) {
            //格式化显示json
            let json = JSON.stringify(JSON.parse($(this).attr('data')), null, 2);
            let view = $('.view').eq(i);
            view[0].value = json;

            view.css({
                "height": view[0].scrollHeight + 'px',
                "overflow-y": "hidden"
            });

            $(this).attr('data', json)

            //根据内容自动调整高度
            view[0].addEventListener('input', (e) => {
                view[0].style.height = e.target.scrollHeight + 'px';
            });
        });

        $('.module').bind('DOMSubtreeModified', function (e) {
            if ($(e.target).html() != $(this).attr('data')) {
                //改变了就变色
                $(this).css({
                    "color": "#198f6e"
                });
            } else {
                $(this).css({
                    "color": "#8f1930"
                });
            }
        });

        $('.view').bind('input', function (e) {
            if ($(e.target)[0].value != $(this).parent('.params').attr('data')) {
                //改变了就变色
                $(this).css({
                    "color": "#198f6e"
                });
            } else {
                $(this).css({
                    "color": "#8f1930"
                });
            }
        });

        $('#save').click(function () {
            var save_data = {};
            $('.module').each(function (i) {
                var data = $(this).parent().siblings('.params').children('.view')[0].value
                save_data[$(this).html()] = data;
            })

            // $.post("save_configure", save_data, function (data) {
            $.post(save_path, save_data, function (data) {
                if (data.code == 0) {
                    location.reload();
                    location.href = reload_path

                }
            })
        });

    });

</script>

